<template>
	<view>
		<!-- :style="{'background-color':`rgba(255,255,255,${opacity})`}" -->
		<view class="top_nav_bar" :style="{'background-color':`rgba(255,255,255,${opacity})`}">
			<view class="safe-area" :style="{height:statusBarHeight + 'px'}"></view>
			<view class="nav_bar">
				<view class="top">
					<view class="icon_box" @click="onClickLeft">
						<van-icon name="arrow-left" />
					</view>
					<view class="tab" v-if="opacity > 0.3">
						<view class="box" :class="opacity > 0.7 ? '':'active'" :style="{opacity}" @click="backTop">
							商品
						</view>
						<view class="box" :class="opacity > 0.7 ? 'active':''" :style="{opacity}">
							详情
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 750rpx;" class="content" :style="{paddingBottom:(safeAreaBottom + 80) + 'px'}">
			<view class="swiperBox">
				<uni-swiper-dot :info="imgList" :current="current" field="content" mode="nav"
					:dotsStyles="{backgroundColor:'#E6E6E6',selectedBackgroundColor:'#FF1642',bottom:5}">
					<swiper class="home-swiper" :indicator-dots="true" interval="5000" duration="200" @change="e => current = e.detail.current"
						indicator-active-color="#fff" indicator-color="#FFFFFF99">
						<swiper-item v-for="(i,index) in imgList" :key="index">
							<view class="pic">
								<image :src="i.imgUrl" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="info">
				<!-- <view class="left">
					
				</view> -->
				<!-- <view class="right">
					库存 {{ detailInfo.releaseStock }}
				</view> -->
				<view class="price" style="margin-bottom: 16rpx;">
					<PriceFont color="#FF4F30" bigSize="40rpx" smallSize="28rpx" :price="detailInfo.normsPrice" />
					<view class="right">
						<text style="margin-right: 20rpx;" v-if="detailInfo.limitCount != 0">限购 {{ detailInfo.limitCount }}</text>
						<text style="margin-right: 20rpx;" v-if="detailInfo.sale>100">销量 {{ detailInfo.sale }}</text>
						<text>库存 {{ detailInfo.releaseStock > 1000 ? '999+':detailInfo.releaseStock }}</text>
					</view>
				</view>
				<view class="title van-multi-ellipsis--l2">
					{{ detailInfo.name }}
				</view>
				<view class="sub_title van-multi-ellipsis--l2">
					<text style="margin-right: 24rpx;">{{ detailInfo.subTitle }}</text>
					<!-- <text v-if="detailInfo.limitCount != 0">限购 {{ detailInfo.limitCount }}{{ detailInfo.unitName }}</text> -->
				</view>
			</view>

			<view class="detail">
				<view class="title">商品详情</view>
				<view class="line">
					<text>产地</text>
					<text>{{ detailInfo.producer }}</text>
				</view>
				<view class="line">
					<text>品牌</text>
					<text>{{ detailInfo.brandName }}</text>
				</view>
				<view class="line">
					<text>单位</text>
					<text>{{ detailInfo.unitName }}</text>
				</view>
				<view class="line">
					<text>规格</text>
					<text>{{ detailInfo.standard }} * {{ detailInfo.normsInfo }}</text>
				</view>
				<view class="line" v-if="detailInfo.expiryNum">
					<text>保质期</text>
					<text>{{ detailInfo.expiryNum }}天</text>
				</view>
			</view>

			<view class="richText">
				<rich-text :nodes="detailInfo.detailsInfo"></rich-text>
			</view>
			<view class="small">
				本小程序商品图片均由商家提供
			</view>
			<!-- <view class="info_msg">
				<view class="picBox">
					<view class="pic">
						<image src="/packageA/static/detail/detail_img.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="lineBox">
					<view class="title">
						货品丰富
					</view>
					<view class="sub_title">
						品牌好货，订货好管家
					</view>
				</view>
				<view class="lineBox">
					<view class="title">
						灵活下单
					</view>
					<view class="sub_title">
						线上下单，线下下单，多方式支持您的订单需求
					</view>
				</view>
				<view class="lineBox">
					<view class="title">
						物流配送
					</view>
					<view class="sub_title">
						物流会按照您所购买商品的配送时间，配送到您指定的收货地址
					</view>
				</view>
			</view> -->
		</view>


		<view class="bottomFix" :style="{paddingBottom:safeAreaBottom + 'px'}">
			<view class="left">
				<view class="icon_box" @click="toBackPage(0)">
					<view class="pic">
						<image src="/static/tabbar/home.png" mode="aspectFill"></image>
					</view>
					<view class="txt">首页</view>
				</view>
				<view class="icon_box" @click="toBackPage(1)">
					<view class="pic">
						<image :src="allCount != 0 ? '/static/tabbar/shopcar_active.png':'/static/tabbar/shopcar.png'" mode="aspectFill"></image>
						<view class="point" v-if="allCount != 0">{{ allCount }}</view>
					</view>
					<view class="txt" :class="allCount !=0 ? 'active':''">购物车</view>
				</view>
			</view>
			<view class="btn" @click="addCar">加入购物车</view>
		</view>
	</view>
</template>

<script>
	let safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom;
	import { reqGoodsDetail } from '@/apis/goods.js';
	import { reqAddGoodsToCart } from '@/apis/rexiaogoods.js'
	import app from '@/App.vue';
	import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				id: "", // 商品id
				current: 0,
				statusBarHeight: app.globalData.statusBarHeight,
				opacity: 0,
				safeAreaBottom: safeAreaBottom,
				imgList: [],
				detailInfo: {
					releaseStock: 0,
					name: "",
					limitCount: 0,
					subTitle: "",
					unitName: "",
					normsInfo: "",
					brandName: "",
					producer: "",
					expiryNum: 0,
					detailsInfo: "",
					normsPrice: 0,
					standard: "", // 规格
					sale: 0
				}
			};
		},
		computed: {
			...mapGetters('car', ['allCount', 'allMoney'])
		},
		onLoad(params) {
			this.id = params.id;
			if (this.id != '') {
				this.getGoodsDetail();
			}
		},
		methods: {
			onClickLeft() {
				uni.navigateBack();
			},
			async getGoodsDetail() {
				let { id } = this;
				let res = await reqGoodsDetail({ id });
				if (res.code === 200) {
					console.log('商品详情', res.data);
					this.imgList = res.data.imgUrlList.map(item => ({ content: '', imgUrl: item }));
					this.detailInfo = res.data;
					this.detailInfo.detailsInfo = res.data.detailsInfo.replace(/<img/gi, '<img style="max-width:100%;width:100%;display:block;"')
				}
			},
			backTop() {
				uni.pageScrollTo({ scrollTop: 0, duration: 100 })
			},
			async addCar() {
				const res = await reqAddGoodsToCart({
					ecCommodityId: this.id,
					type: this.detailInfo.type
				})
				if (res.code === 200) {
					uni.utils.toast('加入购物车成功');
					this.$store.dispatch('car/addToCar', res.data)
					console.log('total', this.$store.getters['car/allCount'], this.$store.getters['car/allMoney']);
				}
				// console.log(res);
			},
			toBackPage(type) {
				uni.switchTab({ url: type === 0 ? '/pages/index/index' : '/pages/shopCar/shopCar' });
			}
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) {
				this.opacity = e.scrollTop / 44 * 1
			} else if (e.scrollTop > 44) {
				this.opacity = 1
			}
		},
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.top_nav_bar {
		position: fixed;
		z-index: 200;
	}

	.nav_bar {
		width: 100%;

		.top {
			padding-left: 24rpx;
			height: 92rpx;
			display: flex;
			align-items: center;

			.icon_box {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.4);
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.tab {
				margin: 0 auto;
				font-size: 32rpx;
				color: #333333;
				line-height: 38rpx;
				transform: translateX(-40rpx);

				.box {
					padding: 10rpx 0;
					display: inline-block;
					margin: 0 15rpx;

					&.active {
						border-bottom: 2px solid #FF1642;
						color: #FF1642;
					}
				}
			}
		}
	}

	.content {
		.swiperBox {
			width: 750rpx;
			height: 600rpx;

			.home-swiper {
				width: 100%;
				height: 600rpx;

				.pic {
					width: 750rpx;
					height: 600rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			/deep/ .uni-swiper__dots-nav {
				width: 60rpx !important;
				height: 34rpx !important;
				background: rgba(0, 0, 0, 0.6) !important;
				border-radius: 17rpx !important;
				padding: 0 !important;
				left: 666rpx !important;
				bottom: 24rpx !important;

				text {
					margin: 0 !important;
					display: inline-block;
					width: 100%;
					text-align: center;
				}
			}
		}

		.info {
			background-color: #fff;
			padding: 24rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			margin-bottom: 24rpx;

			.price {
				display: flex;
				justify-content: space-between;

				.right {
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
					display: flex;
					align-items: center;
				}
			}

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 16rpx;

			}

			.sub_title {
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
			}

			// .left {
			// 	width: 570rpx;


			// }

			// .right {
			// 	flex: 1;
			// 	text-align: right;
			// 	font-weight: 400;
			// 	font-size: 24rpx;
			// 	color: #808080;
			// }
		}

		.detail {
			padding: 24rpx;
			background-color: #fff;
			margin-bottom: 24rpx;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 24rpx;
			}

			.line {
				margin-bottom: 24rpx;

				text {
					&:nth-child(1) {
						width: 130rpx;
						display: inline-block;
						font-weight: 400;
						font-size: 28rpx;
						color: #808080;
						margin-right: 48rpx;
					}

					&:nth-child(2) {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}

		.richText {
			width: 750rpx;

			margin-bottom: 24rpx;
		}

		.small {
			width: 750rpx;
			text-align: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #808080;
			margin-bottom: 24rpx;
			position: relative;

			&::after {
				content: '';
				width: 20rpx;
				height: 8rpx;
				background-color: #DDDDDD;
				border-radius: 4rpx;
				position: absolute;
				top: 50%;
				right: 144rpx;
				transform: translateY(-50%);
			}

			&::before {
				content: '';
				width: 20rpx;
				height: 8rpx;
				background-color: #DDDDDD;
				border-radius: 4rpx;
				position: absolute;
				top: 50%;
				left: 144rpx;
				transform: translateY(-50%);
			}
		}

		.info_msg {
			background-color: #fff;
			padding: 0 24rpx 1rpx 24rpx;
			width: 750rpx;
			box-sizing: border-box;

			.picBox {
				margin: 0 auto;
				width: 336rpx;
				height: 62rpx;
				background-color: #FF1642;
				border-radius: 0rpx 0rpx 38rpx 38rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.pic {
					width: 288rpx;
					height: 38rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.lineBox {
				width: 520rpx;

				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 16rpx;
				}

				.sub_title {
					font-weight: 500;
					font-size: 24rpx;
					color: #808080;
					margin-bottom: 48rpx;
				}
			}
		}
	}

	.bottomFix {
		position: fixed;
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		bottom: 0;
		padding-right: 24rpx;
		align-items: center;

		.left {
			margin-left: 48rpx;

			.icon_box {
				display: inline-block;
				width: 70rpx;
				margin-right: 38rpx;

				.pic {
					margin: 0 auto;
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 6rpx;
					position: relative;

					.point {
						position: absolute;
						top: -5rpx;
						right: -5rpx;
						font-weight: 500;
						font-size: 16rpx;
						color: #FFFFFF;
						width: 20rpx;
						height: 20rpx;
						background-color: #FF3030;
						border-radius: 50%;
						text-align: center;
						line-height: 20rpx;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.txt {
					width: 100%;
					font-weight: 400;
					font-size: 20rpx;
					color: #333333;
					text-align: center;

					&.active {
						color: #FF1642 !important;
					}
				}
			}
		}

		.btn {
			margin-right: 24rpx;
			width: 434rpx;
			height: 76rpx;
			background: #FF1642;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 76rpx;
			text-align: center;

			&.red {
				color: #FF1642;
				border: 2rpx solid #FF1642;
			}
		}
	}
</style>